<template>
    <div>
        <!-- 活动奖励 -->
        <div class="reward-box">
            <img src="../assets/img/tit_hdjl.png" alt="" class="title">
            <div class="reward-list">
                <div class="reward-item" v-for="(award,index) in awards" :key="award.title+index">
                    <RewardItem :award="award"></RewardItem>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import RewardItem from "./reward-item"
import api from "../assets/models/api";
let oApi = new api();
export default {
    name: 'Reward',
    data(){
        return {
            awards: oApi.getActiveInfo().awards
        }
    },
    components:{
        RewardItem
    }
}
</script>

<style lang="stylus" scoped>
.reward-box
    box-sizing border-box
    padding 0 20px
    .title
        display block
        width 222px
        margin 0 auto
    .reward-list
        width 100%
        margin-top 26px
        &::after{
            content ""
            display block
            clear both
        }
        .reward-item
            width 47%
            margin-bottom 28px
            position relative
            &::before{
                content " "
                display block
                background url('../assets/img/light_top.png') no-repeat
                background-size 100%
                width 60%
                height 10px
                transform translateX(34%)
            }
            &::after{
                content " "
                display block
                background url('../assets/img/light_bottom.png') no-repeat
                background-size 100%
                width 60%
                height 26px
                transform translateX(34%)
            }
            &:nth-child(odd){
                float left
            }
            &:nth-child(even){
                float right
            }
</style>